<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <div class="header">
      <h1>益起行</h1>
    </div>

    <!-- 消息图标 -->
    <div class="message-icon">
      <van-icon
        name="chat-o"
        size="24"
        :badge="messageCount"
        @click="goToMessages"
      />
    </div>

    <!-- 海报改为轮播图 -->
    <div class="banner">
      <van-swipe autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="@/assets/helloUser.png" alt="海报1" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/swiper1.png" alt="海报2" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/swiper2.png" alt="海报3" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="module-row">
      <div class="module" @click="goToPage('/find-events')">
        <div class="icon-wrapper">
          <img src="@/icons/svg/activity.svg" alt="找活动" />
        </div>
        <span>找活动</span>
      </div>
      <div class="module" @click="goToPage('/find-organizers')">
        <div class="icon-wrapper">
          <img src="@/icons/svg/organizer.svg" alt="找组织" />
        </div>
        <span>找组织</span>
      </div>
      <div class="module" @click="goToPage('/my-activities')">
        <div class="icon-wrapper">
          <img src="@/icons/svg/myActivity.svg" alt="我的活动" />
        </div>
        <span>我的活动</span>
      </div>
      <div class="module" @click="goToPage('/about-us')">
        <div class="icon-wrapper">
          <img src="@/icons/svg/aboutUs.svg" alt="关于我们" />
        </div>
        <span>关于我们</span>
      </div>
    </div>

    <!-- 往期活动 -->
    <div class="past-activities">
      <h3>往期活动</h3>
      <div class="activity-list">
        <van-card
          v-for="pastActivity in visiblePastActivities"
          :key="pastActivity.id"
          class="activity-item"
          @click="goToActivityDetail(pastActivity.id)"
          :thumb="pastActivity.imageUrl"
          :title="pastActivity.title"
          :desc="pastActivity.description"
        >
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Icon, Card, Swipe, SwipeItem } from "vant";
import userProfileApi from "@/api/userProfile.js";
import activityApi from "@/api/activity.js";

export default {
  components: {
    "van-button": Button,
    "van-icon": Icon,
    "van-card": Card,
    "van-swipe": Swipe,
    "van-swipe-item": SwipeItem,
  },
  data() {
    return {
      messageCount: null,
      pastActivities: [], // 往期活动
      showAllPastActivities: false, // 控制往期活动展开/收起
    };
  },
  computed: {
    visiblePastActivities() {
      return this.showAllPastActivities
        ? this.pastActivities
        : this.pastActivities.slice(0, 4);
    },
  },
  mounted() {
    this.fetchMessageCount();
    this.fetchPastActivities();
  },
  methods: {
    fetchMessageCount() {
      userProfileApi.getMessageCount().then((res) => {
        this.messageCount = res > 0 ? res : null;
      });
    },
    fetchPastActivities() {
      activityApi.getPastEvents().then((res) => {
        this.pastActivities = res.map((event) => {
          let imageUrl = "";
          if (event.pics) {
            let urlMatch = event.pics.match(/"(.*?)"/);
            if (urlMatch && urlMatch[1]) {
              imageUrl = urlMatch[1];
            }
          }
          return {
            id: event.eventId,
            title: event.eventName,
            description: event.eventDescription,
            imageUrl: imageUrl,
          };
        });
      });
    },
    goToMessages() {
      this.$router.push("/user/message");
    },
    goToPage(path) {
      this.$router.push(path);
    },
    goToActivityDetail(activityId) {
      this.$router.push({
        path: "/eventDetail",
        query: {
          id: activityId,
          role: "user",
        },
      });
    },
    toggleActivities(type) {
      if (type === "past") {
        this.showAllPastActivities = !this.showAllPastActivities;
      }
    },
  },
};
</script>


<style scoped>
/* 顶部导航栏样式 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to right, #007aff, #4a90e2);
  color: white;
  font-size: 1.5vh;
  text-align: center;
  padding: 0.03vh 0;
  font-weight: bold;
  z-index: 10;
  box-sizing: border-box;
}

/* 轮播图样式 */
.banner {
  margin-top: 10vh;
  width: 100%;
  height: 25vh;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 主页面样式 */
.home-page {
  padding: 0 4%;
  padding-bottom: 7vh;
  box-sizing: border-box;
  background: #f8f9fa; /* 新增或修改的背景色 */
}

/* 消息图标样式 */
.message-icon {
  position: absolute;
  top: 2.3vh;
  right: 5%;
  color: white;
  z-index: 10;
  font-size: 2vh;
}

/* 模块样式 */
.module-row {
  display: flex;
  justify-content: space-around;
  margin-top: 4vh;
  margin-bottom: 4vh;
  padding: 2vh;
  border: 0.5vh solid #d9d9d9; /* 增加模块边框 */
  border-radius: 1vh;
  background: white;
}

.module {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 20%;
  cursor: pointer;
}

.icon-wrapper {
  width: 10vh;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #6db6f5, #97d9f9);
  border-radius: 50%;
  margin-bottom: 1vh;
  box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.icon-wrapper:hover {
  background: linear-gradient(135deg, #4a90e2, #50c9c3);
  transform: scale(1.1);
  box-shadow: 0 0.8vh 1.5vh rgba(0, 0, 0, 0.2);
}

.icon-wrapper img {
  width: 5vh;
  height: 5vh;
}

.module span {
  font-size: 2vh;
  color: #333;
}

.past-activities {
  margin-top: 5vh;
}

.activity-list {
  display: flex;
  flex-direction: row;
  overflow-y: auto;
  max-height: 60vh; /* 控制最大高度并允许垂直滚动 */
  justify-content: space-between; /* 控制卡片间距 */
  align-items: stretch; /* 让所有子项高度一致 */
}

.activity-item {
  margin: 0 1vw 2vh; /* 增加左右间距控制 */
  padding: 2vh;
  border: 1px solid #ccc;
  border-radius: 10px;
  flex: 1 1 calc(33% - 2vw); /* 让每个卡片占父容器的三分之一，减去间距 */
  display: flex;
  align-items: center;
  justify-content: center; /* 水平居中对齐内容 */
  background-color: #fff;
  box-sizing: border-box; /* 包括 padding 和 border */
  height: auto; /* 让高度自适应内容 */
  min-height: 20vh; /* 确保卡片有最小高度 */
}


.activity-item ::v-deep .van-card__thumb {
  width: 15vh; /* 设置你想要的宽度 */
  height: 15vh; /* 设置你想要的高度 */
  object-fit: cover; /* 保持图片比例并覆盖整个区域 */
  border-radius: 2vh; /* 可选：添加圆角 */
}


</style>

